<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>转账记录查询</span>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <div class="block">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
              <el-select
                v-model="CardBindingStatusvalue"
                placeholder="转账状态"
                style="width: 250px"
              >
                <el-option
                  v-for="item in CardBindingStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="leftitem" v-if="userinfo.rolesId != 4">
            <el-form ref="conditions" :model="conditions">
              <el-select
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 9
                "
                class="servicelevel"
                v-model="conditions.servicelevel"
                placeholder="服务商级别"
                @change="servicelevel"
              >
                <el-option keys="1" label="一级服务商" :value="1"></el-option>
                <el-option keys="2" label="二级服务商" :value="2"></el-option>
              </el-select>
              <el-autocomplete
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 2 ||
                  userinfo.rolesId == 9
                "
                class="servicename"
                v-model.trim="conditions.servicename"
                :fetch-suggestions="querySearch"
                placeholder="服务商名称"
                @select="serviceid"
              ></el-autocomplete>
              <el-autocomplete
                v-if="userinfo.rolesId != 5"
                class="BDname"
                v-model.trim="conditions.BDname"
                :fetch-suggestions="BDname"
                placeholder="业务经理"
                @select="BDid"
              ></el-autocomplete>
            </el-form>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-input
              v-model="outKeyWards"
              placeholder="转账方会员编号/账户/账户名"
              style="width: 250px"
            ></el-input>
            <el-input
              v-model="inKeyWards"
              placeholder="接收方会员编号/账户/账户名"
              style="width: 250px"
            ></el-input>
          </div>

          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" type="primary" @click="reset"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="接收方账号?接收方名称?接受方会员编号"
            align="center"
            :render-header="renderheader"
            width="205"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.inChannelAcct }}</div>
              <div>{{ scope.row.inAcctName }}</div>
              <div>{{ scope.row.inMemberNo }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="转账方账号?转账方名称?转账方会员编号"
            align="center"
            :render-header="renderheader"
            width="205"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.outChannelAcct }}</div>
              <div>{{ scope.row.outAcctName }}</div>
              <div> {{ scope.row.outMemberNo }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="订单号"
            align="center"
            :render-header="renderheader"
          >
          <template slot-scope="scope">
              <div>{{ scope.row.outTradeNo }}
                  <i
                  class="el-icon-copy-document iconmove"
                  @click="copyChannelTradeNoFunc(scope.row.outTradeNo)"
                  v-clipboard:copy="copyoutTradeNo"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="转账手续费"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.trsFee }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="转账状态"
            align="center"
            :render-header="renderheader"
            width="110"
          >
            <template slot-scope="scope">
              <!-- <div>{{ scope.row.trsPayStatusCode }}</div> -->
              <div>
                <span class="green" v-if="scope.row.trsPayStatusCode == '转账成功' || scope.row.trsPayStatusCode == '充值成功' ">
                  {{ scope.row.trsPayStatusCode }}
                </span>
                <span class="reds" v-else-if="scope.row.trsPayStatusCode == '转账失败'|| scope.row.trsPayStatusCode == '充值失败'">
                  {{ scope.row.trsPayStatusCode }}
                </span>
                <span class="hui" v-else >
                  {{ scope.row.trsPayStatusCode }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="转账金额"
            align="center"
            :render-header="renderheader"
            width="110"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.trsTotalFee }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            label="完成时间"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
            align="center"
          >
            <!-- <el-button type="text" size="small" @click="withdrawalButton()"
              >提现</el-button
            >
            <el-button type="text" size="small" @click="joininfo()"
              >更新</el-button
            > -->
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
      </div>
      <br />
      <br />
      <!-- 提现 -->
      <el-dialog
        v-dialogDrag
        title="提现"
        :visible.sync="WithdrawalFormVisible"
        width="50%"
        :close-on-click-modal="false"
      >
        <div class="widthFrom">
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">电子账户名称:</span
            ><span class="widthdralValueStyle">4756378675327</span>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">账号:</span
            ><span class="widthdralValueStyle">75367537</span>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">可提现余额:</span
            ><span class="widthdralValueStyle">7867885</span>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle WithdrawalWordStyle2"
              >提现余额:</span
            ><el-input
              placeholder="请输入内容"
              v-model="WithdrawalBalance"
              clearable
            >
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="amend = false">取消</el-button>
          <el-button type="primary" @click="terminalupdateok">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getservice,
  merchantlist,
  APILedgerRecordsList,
  APITransferRecordStatistics,
  getBD,
  merchantexcel,
  getlabelTagList,
  getDimensionTagList,
  dictionarylist,
} from "@/api/api";
export default {
  name: "baseform",
  data: function () {
    return {
      copyoutTradeNo:'',

      outKeyWards: "", //转账方会员编号，账户，账户名
      inKeyWards: "", //接收方会员编号，账户，账户名

      CardBindingStatus: [
        {
          value: "1",
          label: "成功",
        },
        {
          value: "2",
          label: "失败",
        },
      ],
      CardBindingStatusvalue: "", //转账状态

      tarminal: {
        payLogo: "",
        shopName: "",
        marid: "",
      },
      WithdrawalBalance: "", //提现余额
      WithdrawalFormVisible: false, //提现弹窗显示
      channelType: "",
      exxxx: false,
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      visible: false,
      servicearr: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
      channelslist: [],
      datainfo: {
        totalFee: "",
        fee: "",
        total: "",
        balance: "",
        agent1Profit: "",
        agent2Profit: "",
        bdProfit: "",
      },
      userinfo: "",
      date: "",
      loading: true,
      conditions: {
        servicelevel: "",
        servicename: "",
        stardate: "",
        enddate: "",
        serviceid: "",
        aisle: "",
        shopno: "",
        BDname: "",
        keywords: "",
      },
      dimension: "", //选择维度
      tagname: "", //标签名
      label_all: [], //标签模糊查询
      tagId: "",
      pickerOptions: {
        // 设置不能超过未来时间
        // disabledDate: (time) => {
        //   // 设置可选择的日期为今天之后的一个月内
        //   const curDate = (new Date()).getTime()
        //   // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
        //   const day = 31 * 24 * 3600 * 1000
        //   const dateRegion = curDate - day
        //   return time.getTime() > Date.now() - 8.64e7 ||
        //   time.getTime() < dateRegion
        // }
        // 设置不能超过当天的23:59:59
        disabledDate(time) {
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
          };
          let timeDate =
            date.year + "-" + date.month + "-" + date.date + " 23:59:59";
          let times = new Date(timeDate).getTime();
          return time.getTime() > times;
        },
      },
    };
  },
  created() {
    this.dictionarylist();
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.$store.dispatch("getNewNum", 6);
    // const start = new Date();
    // start.setTime(start.getTime());
    // const year = start.getFullYear();
    // let month = start.getMonth() + 1;
    // if (month < 10) {
    //   month = "0" + month;
    // }
    // let date = start.getDate();
    // if (date < 10) {
    //   date = "0" + date;
    // }
    // const date1 = year + "-" + month + "-" + date + ' '+"00:00:00";
    // const date2 = year + "-" + month + "-" + date +' '+ "23:59:59";
    // this.date = [date1, date2];

    this.LedgerRecordsList("1");
    this.LedgerRecordsList();
    // if (this.userinfo.rolesId == 1) {
    //   this.conditions.servicelevel = 1;
    //   this.servicelevel("1");
    // }
    // if (this.userinfo.rolesId == 2) {
    //   this.conditions.servicelevel = 2;
    //   this.servicelevel("2");
    // } else
    if (this.userinfo.rolesId == 3) {
      this.getBD(this.userinfo.fid);
    }
    // this.dimension_menu(5)
  },
  methods: {
        //复制官方订单号
    copyChannelTradeNoFunc(item){
      this.copyoutTradeNo = item.replace(/^\s+|\s+$/g, "");
    },
        onCopy: function (e) {
      this.$message({
        message: "复制成功",
        type: "success",
      });
      console.log("复制成功");
    },
    onError: function (e) {
      this.$message.error("复制失败");
      console.log("复制失败");
    },
    //处理列表数据
    dealListDate(array) {
      for (let i = 0; i < array.length; i++) {
        array[i].trsSplitRate
          ? (array[i].trsSplitRate = array[i].trsSplitRate + "%")
          : (array[i].trsSplitRate = "-");
        if (!array[i].splitNo) array[i].splitNo = "-";
        if (!array[i].tradeNo) array[i].tradeNo = "-";
      }
      return array;
    },
    //模糊查询商户名
    searchMerchantsList(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        merchantName: this.tarminal.marid,
      };
      merchantlist(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarrlist = [];
          for (var i = 0; i < res.data.length; i++) {
            this.merchantarrlist.push({
              value: res.data[i].merchantName + " — " + res.data[i].merchantNo,
              id: res.data[i].id,
            });
          }
          let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    getMerchantId(value) {
      if (value == "") {
        this.conditions.keywords = "";
      }
    },
    marid(item) {
      this.conditions.keywords = item.id;
      this.tarminal.shopName = "";
    },
    //提现
    withdrawalButton() {
      this.WithdrawalFormVisible = true;
    },
    // 跳转对账单
    joinbill() {
      this.$router.push("/bill");
    },
    // 获取所有通道type
    dictionarylist() {
      dictionarylist({
        type: "channelType",
        status: 0,
        sort: "sorted",
        order: "DESC",
      }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.channelslist = res.data;
        }
      });
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },

    joininfo(val) {
      // console.log(val)
      this.$router.push({
        path: "/businessstatisticsinfo",
        query: {
          no: val,
          date: this.date,
          channelType: this.channelType,
        },
      });
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now(),
        },
      });
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
        h("br"),
        h("span", {}, column.label.split("?")[2]),
      ]);
    },
    // 分页导航
    handleCurrentChange(val) {
      if (this.conditions.servicelevel == 1) {
        this.LedgerRecordsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.LedgerRecordsList("2");
      } else {
        this.LedgerRecordsList("2");
      }
      this.cur_page = val;
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      if (this.conditions.servicelevel == 1) {
        this.LedgerRecordsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.LedgerRecordsList("2");
      } else {
        this.LedgerRecordsList("2");
      }

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      (this.outKeyWards = ""), (this.inKeyWards = ""), (this.date = "");
      (this.tradeKeyWords = ""),
        (this.TransactionOrderNumber = ""),
        (this.splitKeyWords = ""), //会员号
        (this.SplitOrderNumber = ""), //手机
        (this.mailboxNumber = ""), //邮箱
        (this.feeKeyWords = ""), //商户号
        (this.CardBindingStatusvalue = "");
      this.conditions.servicelevel = "";
      this.conditions.servicename = "";
      this.conditions.stardate = "";
      this.conditions.enddate = "";
      this.conditions.serviceid = "";
      this.wx1code = "";
      this.cur_page = 1;
      this.conditions.BDname = "";
      this.conditions.keywords = "";
      this.conditions.BDid = "";
      this.channelType = "";
      this.dimension = "";
      this.tagname = "";
      this.tagId = "";
      if (this.userinfo.rolesId == 2) {
        this.conditions.servicelevel = 2;
      }
    },
    // 业务经理
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    BDid(item) {
      this.conditions.BDid = item.id;
    },
    serviceid(item) {
      this.conditions.serviceid = item.id;
      this.getBD(item.id);
    },
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    // 搜索
    soso() {
      this.loading = true;
      this.cur_page = 1;
      if (!this.conditions.servicename) {
        this.conditions.serviceid = "";
      }
      if (!this.conditions.BDname) {
        this.conditions.BDid = "";
      }
      if (this.conditions.servicelevel == 1) {
        this.LedgerRecordsList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.LedgerRecordsList("2");
      } else {
        this.LedgerRecordsList("2");
      }
    },
    // 服务商名称
    querySearch(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        type: this.conditions.servicelevel,
        keywords: this.conditions.servicename,
      };
      getservice(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.servicearr = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.servicearr.filter(this.createFilter(queryString))
            : this.servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    // 服务商级别
    servicelevel(val) {
      this.servicearr = [];
      getservice({
        type: val,
      }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
    },

    // 商户交易统计
    LedgerRecordsList(level) {
      let sosolist = {};
      if (level == 1) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          payStatusCode: this.CardBindingStatusvalue,
          agent1Id: this.conditions.serviceid,
          startCreateTime: this.date[0],
          finishCreateTime: this.date[1],
          bdId: this.conditions.BDid,
          //   channel_type: this.channelType,
          tradeKeyWords: this.tradeKeyWords,
          outKeyWards: this.outKeyWards,
          inKeyWards: this.inKeyWards,
        };
      } else if (level == 2) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          payStatusCode: this.CardBindingStatusvalue,
          agent2Id: this.conditions.serviceid,
          startCreateTime: this.date[0],
          finishCreateTime: this.date[1],
          bdId: this.conditions.BDid,
          //   channel_type: this.channelType,
          tradeKeyWords: this.tradeKeyWords,
          outKeyWards: this.outKeyWards,
          inKeyWards: this.inKeyWards,
        };
      }
      APITransferRecordStatistics(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          let merdata = res.data;
          this.merchantarr = merdata;
          this.combined = res.pageInfo.recordCount;
          this.pageCount = res.pageInfo.pageCount;
          this.loading = false;
        } else if (res.code == 500) {
          this.$message.error(res.message);
        }
      });
    },
    //维度查询标签
    dimension_menu(v) {
      this.label_all = [];
      getDimensionTagList({
        roleId: v,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.label_all.push({
              value: res.data[i].tagName,
              id: res.data[i].tagId,
            });
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //标签模糊
    querySearch_tag(queryString, cb) {
      // let servicearr = this.label_all;
      // let results = queryString
      //   ? servicearr.filter(this.createFilter(queryString))
      //   : servicearr;
      // // 调用 callback 返回建议列表的数据
      // cb(results);
      let that = this;
      getDimensionTagList({
        roleId: 5,
        tagwords: this.tagname,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          that.$router.push("/login");
        } else if (res.code == 200) {
          that.label_all = [];
          for (var i = 0; i < res.data.length; i++) {
            that.label_all.push({
              value: res.data[i].tagName,
              id: res.data[i].tagId,
            });
          }
          let servicearr = that.label_all;
          let results = queryString
            ? servicearr.filter(that.createFilter(queryString))
            : servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        } else {
          that.$message.error(res.message);
        }
      });
    },
    serviceid_tag(item) {
      this.tagId = item.id;
    },
  },
};
</script>
<style scoped lang='less'>
.iconmove{
  cursor:pointer;
}
.green {
  background: #97c05c;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.reds {
  background: #d3362f;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.hui {
  background: #888888;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.merId {
  width: 250px;
}
.widthFrom {
  font-size: 18px;
}
.WithdrawalStyle {
  padding-top: 10px;
  font-weight: 500;
  display: flex;
  white-space: nowrap;
}
.widthdralValueStyle {
  line-height: 32px;
}
.WithdrawalWordStyle {
  line-height: 32px;
  width: 150px;
  text-align: right;
  margin-right: 10px;
}
.WithdrawalWordStyle2 {
  width: 184px;
}
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 43%;
}
.servicename1 {
  width: 60%;
}
.servicelevel {
  width: 23.5%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 18px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.445);
    font-size: 13px;
    line-height: 180%;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      color: #f9607d;
      font-size: 18px;
    }
    .blue {
      color: #01aaef;
      font-size: 18px;
    }
  }
}
// .BDname{
//   width: 20%;
// }
</style>